<style type="text/css">

.holiday a {
    background-color: green; /* background color */
    border-color: green;     /* border color */
    color: yellow;           /* text color */
    }

</style>


<script type='text/javascript'>

    //Fullcalendar DOC : http://arshaw.com/fullcalendar/docs/

    	var  datapickeroptions={
		  	firstDay: 1,
		  	showMonthAfterYear: true,
		      dateFormat: 'yy-mm-dd',
		      //altField: '#sendDate',
		      monthNames: ['január','február','március','április','május','június','július','augusztus','szeptember','október','november','december'] ,
		      dayNamesMin: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
		      setdate: new Date ('01/01/2010' )
		 };

       var fullcalendaroptions={

                    /**************VIEW****************/
                       allDayText:'egész nap',
                       allDaySlot:false,
                       firstHour:8,
                       firstDay:1,
                       minTime:'08:00',
                       maxTime:'21:00',
                       slotMinutes:30,
                       axisFormat:'HH(:mm)',
                       defaultView:'agendaWeek',
                       height: 700,
                       theme:false,

   columnFormat:{
    month: 'ddd',    // Mon
    week: 'dddd    /  MMM. d', // Mon 9/7
    day: 'dddd yyyy-MM-dd'  // Monday 9/7
},

timeFormat: {
   //agenda: 'HH'
agenda: 'h:mm{ - h:mm}', // 5:00 - 6:30,
'':'h:mm'
  },
  titleFormat:{
    month: 'yyyy MMMM ',                             // September 2009
    week: "yyyy MMMM d{ '&#8212;' MMMM d}", // Sep 7 - 13 2009
    day: 'dddd, yyyy MMMM d '                  // Tuesday, Sep 8, 2009
},


   monthNames: ['január','február','március','április','május','június','július','augusztus','szeptember','október','november','december'] ,
   monthNamesShort: ['jan','feb','márc','ápr','máj','jún','júl','aug','szept','okt','nov','dec'],
   dayNames: ['vasárnap', 'hétfő', 'kedd', 'szerda', 'csütörtök', 'péntek', 'szombat' ],
   dayNamesShort: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
   buttonText: {
    today: 'ma',
    month: 'hónap',
    week: 'hét',
    day: 'nap'},

header: {
        //left: 'prev,next today',
        left: 'prev,next',
        center: 'title',
       // right: 'agendaWeek,month,agendaDay'
        right: 'agendaWeek,month'
},
                    /**********************************/

			//editable: true,
			//events: "index/jsontest",
                        //events: "index/gettime",
                        events: baseURL+'/index/gettime',
			eventDrop: function(event, delta) {
				alert(event.title + ' was moved ' + delta + ' days\n' +
					'(should probably update your database)');
			},

			loading: function(bool) {
				if (bool) $('#loading').show();
				else $('#loading').hide();
			}

		};

        	$(document).ready(function() {

                //datepicker
                        $("#day").datepicker(datapickeroptions);
                //timepicker

$("#timefrom").timePicker({
  startTime: "08:00", // Using string. Can take string or Date object.
  endTime: "20:00", // Using Date object here.
  show24Hours: true,
  separator: ':',
  step: 30});

$("#timeto").timePicker({
  startTime: "08:00", // Using string. Can take string or Date object.
  endTime: "20:00", // Using Date object here.
  show24Hours: true,
  separator: ':',
  step: 30});

/*
$("#timefrom, #timeto").timePicker();
var oldTime = $.timePicker("#timefrom").getTime();

// Keep the duration between the two inputs.
$("#timefrom").change(function() {
  if ($("#timeto").val()) { // Only update when second input has a value.
    // Calculate duration.
    var duration = ($.timePicker("#timeto").getTime() - oldTime);
    var time = $.timePicker("#timefrom").getTime();
    // Calculate and update the time in the second input.
    $.timePicker("#timeto").setTime(new Date(new Date(time.getTime() + duration)));
    oldTime = time;
  }
});
// Validate.
$("#timeto").change(function() {
  if($.timePicker("#timefrom").getTime() > $.timePicker(this).getTime()) {
    $(this).addClass("error");
  }
  else {
    $(this).removeClass("error");
  }
});*/

/******************Calendar naptár***********************/
		$('#calendar').fullCalendar(fullcalendaroptions);
/*****************************************/
    $('#settimeBtn').click(function (event) {

        if($('#timefrom').val() !="" && $('#timeto').val()!="" && $('#day').val()!="" ){
            //prevent multiple click
            $('#settimeBtn').hide();
            $('#message').html("");
            $.post(
            
                baseURL+"/index/settime",
                {
                    timefrom: $('#timefrom').val(),
                    timeto:$('#timeto').val(),
                    day:$('#day').val(),
                    locationid: $('#locationid').val(),
                    info: $('#info').val()
                } ,
                function (res) {

                     $('#calendar').empty();

                    $('#message').html(res);
                    //$('#timesetterform').hide();
                    $('#settimeBtn').show();
                    $('#backlink').show();
                    $('#calendar').fullCalendar(fullcalendaroptions);

                        //a rögzítés utáni késnyszerített refresh
                    $('#calendar').fullCalendar( 'addEventSource', baseURL+'/index/gettime' );

                     //beállított naphoz ugorjon
                   
                      currentdayArr= $('#day').val().split("-");
                    console.log(parseInt(currentdayArr[0])+","+parseInt(currentdayArr[1])+","+parseInt(currentdayArr[2]));
                     //IMPORTANT: month is 0-based, meaning January=0, February=1, etc.
                   $('#calendar').fullCalendar( 'gotoDate', parseInt(currentdayArr[0]) , parseInt(currentdayArr[1])-1, parseInt(currentdayArr[2]) );

                    //eddigi foglalásaimnak lehívása
                   myreservedtime();
                }
                );
        }
        else{

            $('#message').html("Kérem, minden adatot töltsön ki!.");
            $('#settimeBtn').show();


        }

       


    });


    /***************BE/KIKAPCS******************/

     $('#timesetterform').hide();
    $("button").click(function () {
     $('#timesetterform').slideToggle("slow");
    });



	});


        function myreservedtime(){

            $.get(baseURL+'/index/gettime/',
        function (res){
            $("#myreservedtimes").text(res);
        });

        }

</script>
<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
		}

</style>



<div >

  <div id="message" style="text-align:left;color:red;"></div>
     <!--
     <a id="backlink" style="display:none;" href='<?php echo $this->baseUrl(); ?>'>Vissza a Naptárhoz </a>
     -->
 <div style="text-align:left"><strong>Dátum kiválasztása:</strong> <button id="aa">BE/KI</button></div>

    <div style="height:300px;text-align:left" id="timesetterform">
        <form  method="POST">

             <table style="height:30px;">
            <tr style="vertical-align:top;" >

            <td>időponttól: <input type="text" id="timefrom"  name="timefrom" size="10"  value="" /></td>
            <td>időpontig:<input type="text" id="timeto"  name="timeto" size="10"  value="" /> </td>
            <td>nap:<input type="text" id="day"  name="day" size="10" /> </td>
            <!--
            <td>helyszín (most még ID):<input type="text" id="locationid" name="locationid" size="10" /></td>
            -->
            <td >
             <div>
                 <div style="float:left;">
                 szöveg:
                 </div>
                 <div style="float:left;">
                 <textarea  id="info"  name="info"  rows="2" cols="20"> Bejegyzés helye</textarea>
                 </div>
             </div>
            </td>
            <td>
          
                <!--
                type="submit" űrlap post, type="button" ajax
                -->
            <input type="button" id="settimeBtn" value="Rögzítés" />
            </td>
            </tr>
            </table>
        </form>
    </div>
 <!--
    <div style="text-align:left">TAB fül: Foglalt időpontjaim listája:
        <div id="myreservedtimes" style="text-align:left;color:red;"> myreservedtimes </div>
    </div>
 -->
</div>
    <div style="float:left">
    <div id='loading' style='display:none'>betöltés...
    <img src='<?php echo $this->baseUrl(); ?>/images/ajaxloader.gif' />
    </div>
    <div id='calendar'></div>
    <!--
    <br>
    <a href='<?php echo $this->baseUrl(); ?>/index/settime'>set time</a>
    -->
    </div>


</div>